<template>
  <div class="flex-container">
    <div class="title-row">
      <h1 class="title01">活动 统计</h1>
    </div>

    <div class="content-row">
      <div class="c1">
        <div class="image-text-container">
          <img
            src="@/assets/zyimages/图层2.png"
            alt="当年发活动
图标"
            class="icon"
          />
          <div class="text-container">
            <div class="font1">88.3763</div>
            <h1 class="title">当年发活动 (万kwh)</h1>
          </div>
        </div>
      </div>
      <div class="c1">
        <div class="image-text-container">
          <img
            src="@/assets/zyimages/图层2.png"
            alt="当年发活动
图标"
            class="icon"
          />
          <div class="text-container">
            <div class="font1">88.3763</div>
            <h1 class="title">当年发活动 (万kwh)</h1>
          </div>
        </div>
      </div>
    </div>

    <div class="content-row">
      <div class="c1">
        <div class="image-text-container">
          <img
            src="@/assets/zyimages/图层2.png"
            alt="当年发活动
图标"
            class="icon"
          />
          <div class="text-container">
            <div class="font1">88.3763</div>
            <h1 class="title">当年发活动 (万kwh)</h1>
          </div>
        </div>
      </div>
      <div class="c1">
        <div class="image-text-container">
          <img
            src="@/assets/zyimages/图层2.png"
            alt="当年发活动
图标"
            class="icon"
          />
          <div class="text-container">
            <div class="font1">88.3763</div>
            <h1 class="title">当年发活动 (万kwh)</h1>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="content-row">
      <div class="c1">
        <div class="font1">
          17.2275
        </div>
        <h1 class="title">当月发活动
(万kWh)</h1>
      </div>
      <div class="c1">
        <div class="font1">
          9154.33
        </div>
        <h1 class="title">当日发活动
(万kwh)</h1>
      </div>
    </div> -->
  </div>
</template>

<style lang="scss" scoped>
.flex-container {
  display: flex;
  flex-direction: column; /* 设置为纵向布局 */
  gap: 10px; /* 调整元素之间的间隔距离 */
  padding: 0%;
  flex-grow: 2;
  background-color: rgb(10, 21, 44);
  width: 100%; /* 让该元素占满其父容器的宽度 */
  height: 15%; /* 该元素高度为父容器高度的50% */
}
.title-row {
  display: flex;
  margin-bottom: -10px; /* 示例值，可根据需要调整 */
  align-items: center; /* 垂直居中对齐 */
}
.content-row {
  display: flex;
  margin-bottom: -6px; /* 示例值，可根据需要调整 */
  gap: 10%; /* 调整元素之间的间隔距离 */
}
.c1 {
  display: flex;
  gap: 10px; /* 调整元素之间的间隔距离 */
}
.title {
  font-size: 10px;
  font-weight: bold;
}
.title01 {
  font-size: 20px;
  font-weight: bold;
}
.font1 {
  color: rgb(247, 250, 253);
  text-shadow: 5px 5px 8px rgba(3, 68, 138);
  font-size: 45px;
}
.font2 {
  color: rgb(253, 245, 2);
  text-shadow: 5px 5px 8px rgba(3, 68, 138);
  font-size: 40px;
}

.image-text-container {
  display: flex;
  align-items: center; /* 图片和文本垂直居中对齐 */
}
.icon {
  max-width: 50px; /* 根据需要调整图片最大宽度 */
  height: auto; /* 保持图片的宽高比 */
  margin-right: 20px; /* 图片与文本之间的间距 */
}
.text-container {
  display: flex;
  margin-top: 0px; /* 新增：增加文本容器与上面元素的间距 */
  flex-direction: column; /* 文本内容垂直排列 */
  gap: 3px; /* 文本行间的间距 */
}
</style>
